<template>
    <view class="big_box">
        <view class="top">
            <!-- 头部搜索框 -->
            <view class="z-nav">
                <view class="search-block" @tap="search_time()">
                    <view class="search-ico-wapper">
                        <image src="../../static/icon/search@3x.png" class="search-icon"></image>
                    </view>
                    <input placeholder="搜索商品" maxlength="20" class="search-text" focus/>
                </view>
                <view class="search-font">
                    <text>搜索</text>
                </view>
            </view>
        </view>
        <view class="activity_body">
            <!-- 显示商品信息 -->
            <view class="activity">
                <view class="activity_demo">
                    <view class="activity_img">
                        <!-- <image src="../../static/fruits/juzhi.jpeg"></image> -->
                    </view>
                    <view class="activity_font">
                        <text>广西沃柑1.5kg装</text>
                        <text class="number">￥31.9</text>
                    </view>
                </view>
            </view>
            <!-- 显示商品信息 -->
            <view class="activity">
                <view class="activity_demo">
                    <view class="activity_img">
                        <!-- <image src="../../static/fruits/juzhi.jpeg"></image> -->
                    </view>
                    <view class="activity_font">
                        <text>广西沃柑1.5kg装</text>
                        <text class="number">￥31.9</text>
                    </view>
                </view>
            </view>
            <!-- 显示商品信息 -->
            <view class="activity">
                <view class="activity_demo">
                    <view class="activity_img">
                        <!-- <image src="../../static/fruits/juzhi.jpeg"></image> -->
                    </view>
                    <view class="activity_font">
                        <text>广西沃柑1.5kg装</text>
                        <text class="number">￥31.9</text>
                    </view>
                </view>
            </view>
        </view>

    </view>
 
</template>
<script>
    export default{
        data(){
            return{

            }
        },
        methods:{
            /* search_time(){
                uni.navigateTo({
                    url:"/pages/seek/seekHistory"
                })
            } */
        }
    }
</script>

<style lang="scss" scoped>

    .z-nav{
        display: flex;
        flex-direction:row; /* 水平轴上进行排列*/
        margin-top: 10rpx;

    }
    .search-block{
        display:flex;
        flex-direction:row;
        width: 540rpx;
        height: 70rpx;
        border-radius: 35rpx;
        margin: 0 25rpx;
        justify-content: center;
        background-color: #f2f2f2;

    }
    .search-icon{
        width: 60rpx;
        height: 60rpx;

    }
    .search-text{
        font-size:30rpx;
        width:180rpx;
        height: 60rpx;
        border-radius:0 20rpx 20rpx 0;
        color: #999999;
        margin-top: 5rpx;
        background-color: #f2f2f2;
    }
    .search-ico-wapper{
        border-radius: 20rpx 0 0 20rpx;
        background-color:#f2f2f2;
        display: flex;
        flex-direction:column;
        justify-content: center;
        padding: 0 10rpx;

    }
    .search-font{
        display: flex;
        justify-content: flex-start; /* 从左到右进行排列*/
        width: 130rpx;
        height: 70rpx;
        background-image: linear-gradient(90deg, #ffca4b 0%, #ff4200 100%),
        linear-gradient(#f2f2f2, #f2f2f2);
        background-blend-mode: normal, normal;
        border-radius: 35rpx;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 28rpx;
    }

    .activity_body{
        width: 100%;
        display: flex;
        flex-direction:row; /* 水平方式排列*/
        flex-wrap: wrap; /* 必要时换行*/
        margin-top: 15px;
        .activity{
            display: flex;
            width: calc(50% - 20rpx);
            height: 417rpx;
            background-color: #ffffff;
            border-radius: 8rpx;
            border: solid 2rpx #f2f2f2;
            /* margin-left: 20rpx; */
            flex-wrap: wrap; /* 必要时换行*/
            flex-direction:row; /* 水平轴上进行排列*/
            box-sizing: border-box;
            margin:0 10rpx 10rpx 10rpx;
            .activity_demo{
                display: flex;
                align-items: center;
                justify-content: center;//设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式
                flex-wrap: wrap;
                .activity_img{
                    width: 330rpx;
                    height: 295rpx;
                    background-color: #ffffff;
                    border-radius: 4rpx;
                    box-sizing: border-box;
                    overflow:hidden;
                    align-items:center;
                    margin-bottom: 20rpx;
                    padding: 20rpx;
                    image{
                        width: 340rpx;
                        height: 260rpx;
                    }
                }
                .activity_font{
                    justify-content:center;
                    margin-bottom: 20rpx;
                    text{
                        width: 210rpx;
                        height: 24rpx;
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #191919;
                        font-size: 24rpx;
                        font-weight:bold; /* 字体加粗*/
                    }
                    .number{
                        color: red;
                        display: block; //转换成块级元素显示，前后带有换行符
                    }
                }
            }
        }
    }

</style>
